<template>
	<view class="container">
		<!-- 主内容区 -->
		<view class="main">
			<!-- 用户信息概览 -->
			<view class="user-info">
				<view class="avatar-wrapper">
					<u-icon name="account" color="#fff" size="45"></u-icon>
				</view>
				<view class="user-detail">
					<text class="user-name">{{userInfo.account}}</text>
					<view class="user-status" v-if="userInfo.isIdentification==1 && userInfo.userState!='01'">
						<u-icon name="error-circle" color="#fa3534" size="15"></u-icon>
						<text>已冻结</text>
					</view>

				</view>
			</view>

			<!-- 功能列表 -->
			<view class="function-list">
				<!-- 个人资料 -->
				<view class="function-item" @click="goPersonalInfoPage">
					<view class="item-icon personal-icon">
						<u-icon name="file-text" color="#165DFF" size="20"></u-icon>
					</view>
					<text class="item-text">个人资料</text>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>

				<!-- 实名认证状态 -->
				<view class="function-item">
					<view :class="['item-icon', iconClass]">
						<u-icon :name="statusIcon" :color="colorIcon" size="20"></u-icon>
					</view>
					<text class="item-text">实名认证状态</text>
					<text class="status-text"
						:style="{'color':colorIcon}">{{userInfo.isIdentification==1?'已认证':'未认证'}}</text>
				</view>

				<!-- 跨省报销开通状态 -->
				<view class="function-item">
					<view :class="['item-icon', iconClass2]">
						<u-icon :name="statusIcon2" :color="colorIcon2" size="20"></u-icon>
					</view>
					<text class="item-text">跨省报销开通状态</text>
					<text class="status-text"
						:style="{'color':colorIcon2}">{{userInfo.isTransProvincial==1?'已开通':'待开通'}}</text>
				</view>

				<!-- 授权管理 -->
				<view class="function-item" @click="goAuthorizationPage">
					<view class="item-icon personal-icon">
						<u-icon name="lock" color="#165DFF" size="20"></u-icon>
					</view>
					<text class="item-text">授权管理</text>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>

				<!-- 常用报销单位 -->
				<view class="function-item" @click="goExpenseUnitsPage">
					<view class="item-icon personal-icon">
						<u-icon name="grid" color="#165DFF" size="20"></u-icon>
					</view>
					<text class="item-text">常用报销单位</text>
					<view class="unit-count">
						<text class="count-text">{{userInfo.unitCount||0}}家单位</text>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view v-if="result == 9000" class="blackView">
			<text class="blackText">登录后可查看您的票据</text>
			<view class="loginBtn" @click="login">
				<text class="loginText">登录/注册</text>
			</view>
		</view>
		<view v-else class="footer">
			<u-button type="primary" text="退出登录" @click="logout"></u-button>
		</view>
		
		<u-modal ref="editModal" title="提示" :show="showEditModal" :mask-close-able="false" :showCancelButton='true'
			 @cancel='showEditModal=false' @confirm="confirm" :close-on-click-modal="false">
			 <text>账号未完善，部分功能不可用，是否去完善?</text>
		</u-modal>
	</view>
</template>

<script>
	import {
		getUser
	} from '@/api/profileApi.js'
	export default {
		data() {
			return {
				result:9000,
				showEditModal: false,
				statusIcon: 'warning', //checkmark-circle
				colorIcon: '#FF7D00', //#00B42A
				iconClass: 'warning-icon', //success-icon
				statusIcon2: 'warning', //checkmark-circle
				colorIcon2: '#FF7D00', //#00B42A
				iconClass2: 'warning-icon', //success-icon
				userCode: '',
				isIdentification: 0,
				currentPage: '',
				userName: '张小明',
				editName: '张小明',
				editPhone: '13800005678',
				editEmail: 'zhangxm@example.com',
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				showOldPwdError: false,
				showNewPwdError: false,
				showConfirmPwdError: false,
				oldPwdError: '',
				newPwdError: '',
				confirmPwdError: '',
				autoReceive: true,
				crossProvince: false,
				receiptAuth: true,
				userInfo: {
					account: '',
					cardNo: '',
					isIdentification: 0,
					isTransProvincial: '0',
					phone: '',
					unitCount: 0,
					userState: '',
					email:''
				}
			};
		},
		created() {			
			this.userCode = uni.getStorageSync('account')
			this.isIdentification = uni.getStorageSync('isIdentification') || 0
		},
		onShow() {
			//页面出现就加载
			this.getUserFun()
			console.log('onShow')
		},
		methods: {
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			async getUserFun() {
				try {
					uni.showLoading({
						title:'加载中'
					})
					const res = await getUser()
					console.log('res', res)
					this.result=res.result
					if (res.result == 0) {
						this.userInfo = {
							...res
						}
						if (res.isIdentification == 1) {
							this.iconClass = 'success-icon'
							this.colorIcon = '#00B42A'
							this.statusIcon = 'checkmark-circle'
						} else {
							this.iconClass = 'warning-icon'
							this.colorIcon = '#FF7D00'
							this.statusIcon = 'warning'
						}
						if (res.isTransProvincial == 1) {
							this.iconClass2 = 'success-icon'
							this.colorIcon2 = '#00B42A'
							this.statusIcon2 = 'checkmark-circle'
						} else {
							this.iconClass2 = 'warning-icon'
							this.colorIcon2 = '#FF7D00'
							this.statusIcon2 = 'warning'
						}
					}
					uni.hideLoading()
				} catch (error) {
					this.$u.toast(error.message || '接口错误');
					uni.hideLoading()
				}
			},
			goPersonalInfoPage() {
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				if(this.isIdentification == 0){
					this.showEditModal = true;
					return;
				}
				uni.navigateTo({
					url: '/pages/profile/personalInfoPage',
					success:()=> {
						uni.$emit('userInfo', this.userInfo)
					}
				})
			},
			goAuthorizationPage() {
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				if(this.isIdentification == 0){
					this.showEditModal = true;
					return;
				}
				uni.navigateTo({
					url: `/pages/profile/authorizationPage?isTransProvincial=${this.userInfo.isTransProvincial}`
				})
			},
			goExpenseUnitsPage() {
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				if(this.isIdentification == 0){
					this.showEditModal = true;
					return;
				}
				uni.navigateTo({
					url: '/pages/profile/expenseUnitsPage'
				})
			},
			async confirm() {
				uni.navigateTo({
					url: `/pages/login/login?stepNum=2&telephone=${uni.getStorageSync('account')}`
				})
				this.showEditModal = false;
			},
			logout() {
				uni.showModal({
					title: '确认退出？',
					success: (res) => {
						if (res.confirm) {
							// uni.setStorage({
							// 	key: 'uid',
							// 	data: ''
							// })
							// uni.setStorage({
							// 	key: 'sid',
							// 	data: ''
							// })
							// uni.setStorage({
							// 	key: 'account',
							// 	data: ''
							// })
							// uni.setStorage({
							// 	key: 'isIdentification',
							// 	data: ''
							// })
							 // 3. 清除 uni.setStorage 存储的数据（全端通用，包括小程序、App）
							  uni.clearStorageSync();
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}
					}
				});

			},
			showPage(pageName) {
				this.currentPage = pageName;
			},
			hidePage() {
				this.currentPage = '';
			},

			submitPasswordForm() {
				let isValid = true;

				// 验证旧密码
				if (!this.oldPassword) {
					this.showOldPwdError = true;
					this.oldPwdError = '请输入旧密码';
					isValid = false;
				} else {
					this.showOldPwdError = false;
				}

				// 验证新密码
				if (!this.newPassword || this.newPassword.length < 6) {
					this.showNewPwdError = true;
					this.newPwdError = '密码长度不能少于6位';
					isValid = false;
				} else {
					this.showNewPwdError = false;
				}

				// 验证确认密码
				if (this.newPassword !== this.confirmPassword) {
					this.showConfirmPwdError = true;
					this.confirmPwdError = '两次输入的密码不一致';
					isValid = false;
				} else {
					this.showConfirmPwdError = false;
				}

				if (isValid) {
					uni.showToast({
						title: '密码修改成功，请使用新密码登录',
						icon: 'none'
					});
					this.hidePage();
					// 重置表单
					this.oldPassword = '';
					this.newPassword = '';
					this.confirmPassword = '';
				}
			},
			submitEditForm() {
				// 简单验证
				if (!this.editName.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.editPhone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				if (this.editEmail && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.editEmail)) {
					uni.showToast({
						title: '请输入正确的邮箱地址',
						icon: 'none'
					});
					return;
				}

				// 保存修改
				this.userName = this.editName;
				uni.showToast({
					title: '个人信息修改成功',
					icon: 'none'
				});
				this.hidePage();
			}
		}
	};
</script>

<style>
	@import 'index.css'
	
</style>